<template>
  <div :class="$style.wrap">
    <Button type="primary" @click="clickHandle">预览</Button>
    <el-dialog :visible.sync="visible" width="70%" title="预览" :close-on-click-modal="false" destroy-on-close>
      <Preview v-if="visible" :id="qid" is-preview :btn-show="false"></Preview>
    </el-dialog>
  </div>
</template>
<script>
import Preview from '../../components/preview'
export default {
  name: 'PreviewDialog',
  components: {
    Preview
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    selectionList: {
      type: Array,
      default: undefined
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    qid() {
      if (this.id) {
        return this.id
      } else if (this.selectionList.length === 1) {
        return this.selectionList[0].id
      }
      return ''
    }
  },
  methods: {
    clickHandle() {
      if (this.id !== '') {
        this.visible = true
      } else {
        this.$checkSelected(this.selectionList).then(() => {
          this.visible = true
        })
      }
    }
  }
}
</script>
<style lang="scss" module>
.wrap{
  display: inline-block;
  margin-right: 10px;
}
</style>
